
$active-color = #41B883;
$yellow = #f5A100;
$text-color-impor = #000;
$text-color = #757575;
$src-bg = #e4e4e4;

bottom-border-1px($color)
  position:relative
  &:after
    content:""
    position:absolute
    bottom:0
    left:0
    width: 100%
    height: 1px
    background-color: $color
    transform: scaleY(0.5)
top-border-1px($color)
  position:relative
  &:before
    content:""
    position: absolute
    z-index: 200
    width: 100%
    top: 0
    left: 0
    height: 1px
    background-color: $color
//根据像素比缩放 1px 像素边框 
@media only screen and (-webkit-device-pixel-ratio: 2 ) 
  .border-1px 
    &::before 
      transform scaleY(.5) 
@media only screen and (-webkit-device-pixel-ratio: 3 ) 
  .border-1px 
    &::before 
      transform scaleY(.333333) 
//根据像素比来使用 2x 图 3x 图 
bg-image($url) 
  background-image: url($url + "@2x.png") 
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) 
    background-image: url($url + "@3x.png")

.clearfix
  display:inline-block
  &::before, &::after
    display:block
    content:''
    line-height:0
    height:0
    clear:both
    visibility :hidden 

@media (-webkit-device-pixel-ratio: 1.5),(min-webkit-device-pixel-ratio: 1.5)
  .border-1px
    &::after,&::before
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-device-pixel-ratio: 2),(min-webkit-device-pixel-ratio: 2)
  .border-1px
    &::after,&::before
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)